Flutter অ্যাপে Multiple Screens এবং Navigation

Flutter অ্যাপে Multiple Screens এবং Navigation ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনকে আরও ডাইনামিক এবং ব্যবহারবান্ধব করা যায়। Navigation ব্যবহারের মাধ্যমে আপনি অ্যাপ্লিকেশনটিতে বিভিন্ন স্ক্রিন বা পেজের মধ্যে যাতায়াত করতে পারবেন। Flutter-এ Navigator এবং রুট ব্যবহারের মাধ্যমে Navigation পরিচালনা করা হয়। এখানে Flutter-এ Multiple Screens এবং Navigation কিভাবে করা যায় তার বিস্তারিত আলোচনা করা হলো:

১. Multiple Screens তৈরি করা

Flutter-এ প্রতিটি স্ক্রিন একটি আলাদা উইজেট হিসেবে তৈরি করা হয়। সাধারণত আমরা StatelessWidget বা StatefulWidget ব্যবহার করে স্ক্রিন তৈরি করি। নিচে দুটি স্ক্রিন উদাহরণ হিসেবে তৈরি করা হয়েছে:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Navigation Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Back to Home Screen'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

২. কোডের ব্যাখ্যা

1. HomeScreen এবং SecondScreen: এখানে দুটি আলাদা স্ক্রিন তৈরি করা হয়েছে। HomeScreen থেকে SecondScreen-এ যেতে একটি বাটন আছে এবং SecondScreen থেকে HomeScreen-এ ফিরে যাওয়ার জন্য একটি বাটন আছে।
2. MaterialApp:
   • initialRoute: অ্যাপ্লিকেশন চালু হলে প্রথমে কোন স্ক্রিন দেখানো হবে তা নির্ধারণ করে।
   • routes: অ্যাপ্লিকেশনের বিভিন্ন স্ক্রিন বা পেজের রুট নির্ধারণ করে। / দ্বারা HomeScreen এবং /second দ্বারা SecondScreen এর রুট নির্ধারণ করা হয়েছে।
3. Navigator:
   • pushNamed: এই মেথডটি ব্যবহার করে আমরা নতুন স্ক্রিনে যেতে পারি। এখানে /second রুটের মাধ্যমে SecondScreen-এ যাওয়া হয়েছে।
   • pop: এই মেথডটি ব্যবহার করে আমরা আগের স্ক্রিনে ফিরে আসতে পারি।

৩. Direct Routes এবং Named Routes

Flutter-এ দুটি ধরনের রুট সিস্টেম রয়েছে:

• Direct Route: সরাসরি উইজেট পাস করে নেভিগেশন করা হয়।
• Named Route: স্ক্রিনের জন্য একটি নাম নির্ধারণ করে পরে সেই নাম ব্যবহার করে নেভিগেশন করা হয়।

Direct Route উদাহরণ

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

• MaterialPageRoute: এটি একটি Route ক্লাস, যা স্ক্রিনের জন্য একটি নতুন রুট তৈরি করে। builder প্যারামিটারে আমরা যেতে চাওয়া স্ক্রিনের উইজেট পাস করি।

Named Route উদাহরণ

Navigator.pushNamed(context, '/second');

• Named Route ব্যবহারের সুবিধা হলো, এটি কোডে পরিবর্তন করা সহজ এবং সরাসরি উইজেটের নাম উল্লেখ না করেও রুট পরিচালনা করা যায়।

৪. ডেটা পাস করা স্ক্রিনের মধ্যে

Flutter-এ এক স্ক্রিন থেকে অন্য স্ক্রিনে ডেটা পাস করা যায়। Navigator.push() বা Navigator.pushNamed() মেথড ব্যবহার করে আমরা ডেটা পাস করতে পারি।

উদাহরণ: ডেটা পাস করা

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(data: 'Hello from Home Screen'),
              ),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

• এখানে HomeScreen থেকে data পাস করা হয়েছে SecondScreen-এ। SecondScreen-এ ডেটা রিসিভ করে প্রদর্শন করা হয়েছে।

৫. স্ক্রিনে নেভিগেশন এবং রিটার্ন ভ্যালু পাস করা

Flutter-এ আপনি স্ক্রিনে নেভিগেশন করার সময় রিটার্ন ভ্যালু পেতে পারেন। এটি সাধারণত ফর্ম সাবমিশন বা ইউজার ইন্টারঅ্যাকশন থেকে রেজাল্ট সংগ্রহ করতে ব্যবহৃত হয়।

উদাহরণ: রিটার্ন ভ্যালু পাস করা

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Second Screen'),
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
            print('Returned value: $result');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Return to Home Screen'),
          onPressed: () {
            Navigator.pop(context, 'Hello from Second Screen');
          },
        ),
      ),
    );
  }
}

• Navigator.pop(context, 'value'): যখন স্ক্রিন থেকে ফিরে আসা হয়, তখন একটি ভ্যালু পাস করা হয়।
• await Navigator.push(): এই মেথডটি ব্যবহার করে আমরা স্ক্রিনে গিয়ে ভ্যালু ফেরত আনার জন্য অপেক্ষা করি।

৬. Bottom Navigation Bar ব্যবহার করা

Flutter-এ BottomNavigationBar ব্যবহার করে আপনি নিচে একটি নেভিগেশন বার তৈরি করতে পারেন, যা দিয়ে একাধিক স্ক্রিনে নেভিগেট করা যায়।

class BottomNavExample extends StatefulWidget {
  @override
  _BottomNavExampleState createState() => _BottomNavExampleState();
}

class _BottomNavExampleState extends State<BottomNavExample> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    HomeScreen(),
    SecondScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}

৭. Drawer ব্যবহার করা

Flutter-এ Drawer উইজেট ব্যবহার করে সাইড নেভিগেশন মেনু তৈরি করা যায়, যা বিভিন্ন স্ক্রিনের জন্য লিংক প্রদান করে।

Scaffold(
  appBar: AppBar(
    title: Text('Drawer Example'),
  ),
  drawer: Drawer(
    child: ListView(
      children: <Widget>[
        ListTile(
          title: Text('Home'),
          onTap: () {
            Navigator.pushNamed(context, '/');
          },
        ),
        ListTile(
          title: Text('Second Screen'),
          onTap: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('Drawer Navigation')),
)

এইভাবে, Flutter-এ Multiple Screens এবং Navigation ব্যবহার করে আপনি একটি পূর্ণাঙ্গ অ্যাপ্লিকেশন তৈরি করতে পারেন, যা ব্যবহারকারীদের বিভিন্ন স্ক্রিনের মধ্যে সহজে নেভিগেট করতে সহায়তা করবে।